<template>
  <div class="c_chart_line">
    <div class="title" v-if="title"><strong>{{title}}</strong></div>
    <div :style="{height:height+'px'}" ref="chart"></div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import _ from 'lodash'

  /**
   * @series {array}
   * @example series item {
   * name: 'seriesName',
   * data: [[
      ["2012", "641"],
      ["2013", "624"],
      ["2014", "661"]
    ]]}
   */
  export default {
    name: 'CChartLine',
    props: {
      height: {
        type: [String, Number],
        default: 220
      },
      series: {
        type: Array
      },
      type: {
        type: String,
        default: 'line' // line, bar
      },
      title: { // 图表标题
        type: String,
        required: false
      },
      lineSmooth: {
        type: [Boolean, Number], // 是否平滑曲线显示
        default: 0.3
      },
      showLevel: { // 是否显示标线
        type: Boolean,
        default: false
      },
      levelLegend: { // 标线图例
        type: String,
        default: '我的'
      },
      levelName: { // 标线分类名
        type: String
      },
      levelValue: { // 标线值
        type: [String, Number]
      },
      levelLineColor: { // 标线颜色
        type: String,
        default: '#f4be08'
      }
    },
    data () {
      return {
        myChart: null,
        chartOption: null,
        colorThemes: [
          ['#f4be08', '#ffaf25'],
          ['#c9d1d7', '#ffaf25'],
          ['#e94c4b', '#ffaf25']
        ]
      }
    },
    computed: {
      ...mapGetters(['deviceWidth'])
    },
    watch: {
      deviceWidth () {
        this.myChart.resize()
      },
      series: {
        handler (v) {
          console.log('series', v)
          this.chartUpdate()
        },
        deep: true
      }
    },
    mounted () {
      this.chartUpdate()
    },
    beforeUpdate () {
      this.chartUpdate()
    },
    methods: {
      chartUpdate () {
        let _self = this
        if (!_.isEmpty(_self.series)) {
          _self.createRankingChart({
            type: _self.type,
            el: _self.$refs.chart,
            smooth: _self.lineSmooth,
            title: _self.title,
            series: _self.series
          }, _self.showLevel)
        }
      },
      /**
       * 创建排名图表
       */
      createRankingChart (data, showLevel) {
        let _self = this
        /* 图表类型 */
        let title = data.title
        let type = data.type
        let smooth = data.smooth
        let xAxisData = [] // x轴分类
        let dataData = data.series // 分类data
        let legendData = [] // 图例
        let optionsSeriesData = [] // series

        dataData.forEach((item) => {
          let _itemData = {
            name: item.name,
            type: type,
            data: item.data,
            smooth: smooth,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter (obj) {
                  return obj.value[1]
                }
              }
            }
          }
          if (type === 'bar') {
            _itemData.barWidth = '30%'
          }
          if (item.color) {
            _itemData.itemStyle = {
              normal: {
                color: item.color
              }
            }
          }
          optionsSeriesData.push(_itemData)
          legendData.push(item.name)

          item.data.forEach(subItem => {
            let _itemName = subItem[0]
            if (xAxisData.indexOf(_itemName) === -1) {
              xAxisData.push(subItem[0])
            }
          })
        })
        xAxisData.sort((a, b) => a > b)

        /* 添加水平线 */
        let _levelLegend = this.levelLegend
        let _levelName = this.levelName
        let _levelValue = this.levelValue
        let _levelLineColor = this.levelLineColor
        if (showLevel) {
          let _levelData = {
            name: _levelLegend,
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            data: [[_levelName, _levelValue]],
            markLine: {
              silent: true,
              symbol: 'diamond',
              lineStyle: {
                normal: {
                  width: 0.8,
                  type: 'dashed',
                  color: _levelLineColor
                }
              },
              data: [
                {
                  type: 'max',
                  value: _self.myScore,
                  label: {
                    normal: {
                      show: false
                    }
                  }
                }
              ]
            },
            itemStyle: {
              normal: {
                color: _levelLineColor
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter (obj) {
                  return obj.value[1]
                }
              }
            }
          }
          legendData.push({
            name: _levelLegend,
            icon: 'diamond'
          })
          if (xAxisData.indexOf(_levelName) === -1) {
            xAxisData.push(_levelName)
          }
          optionsSeriesData = optionsSeriesData.concat(_levelData)
        }
        console.log(legendData)
        let option = {
          title: {
            show: false,
            text: title
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',
            bottom: 5,
            data: legendData,
            textStyle: {
              color: '#444'
            }
          },
          dataZoom: false,
          grid: {
            show: false,
            bottom: 55,
            right: 30,
            top: 30,
            left: 30
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // max: data.full,
            scale: true,
            axisLabel: {
              show: false,
              formatter: '{value}',
              textStyle: {
                fontSize: 12
              }
            }
          },
          series: optionsSeriesData,
          tooltip: {
            show: true,
            trigger: 'axis'
          }
        }
        this.chartOption = option
        this.myChart = _self.$echarts.init(data.el)
        this.myChart.setOption(option)
        // _self.$nextTick(() => {
        //   this.myChart.resize()
        // })
      }
    }
  }
</script>

<style lang="less">
  @import '../../assets/less/_mixins-wln.less';

  .c_chart_line {
    .title{
      text-align: center;
      font-size:15px;
    }
  }
</style>
